Web 动效基础:从意图、缓动到合成层的完整工程模型
cornerstone / advanced用渲染管线、属性成本、时间函数和可清理运行时建立 Web 动效基础,避免把 GPU、60 FPS 与 will-change 当成魔法词。
16SERIES / 08
按建议顺序排列的连续阅读路径。每一篇都可以独立阅读,也能与前后章节组合。
用渲染管线、属性成本、时间函数和可清理运行时建立 Web 动效基础,避免把 GPU、60 FPS 与 will-change 当成魔法词。
16区分浏览器原生跨文档过渡与 Astro ClientRouter,设计可回退的页面快照、脚本重挂载和精确 cleanup。
12区分 scroll progress 与 view progress timeline,用 @supports、静态内容和 IntersectionObserver 建立可回退的滚动动效。
13用字体轴合同、CSS 高层属性、帧合并输入和静态回退构建可读、可操作且可测量的变量字体交互。
13把 GSAP context、matchMedia 与 Astro 路由事件组合成页面级动效作用域,解决重复监听、残留 ScrollTrigger 和切页后脚本失效。
12以语义文字为基础、Three.js 着色器为增强,完整设计字形来源、纹理清晰度、交互坐标、上下文丢失、性能测量与 DOM 回退。
17从安全上下文、adapter、features、limits、device lost 到 WebGL/Canvas/DOM 回退,建立不依赖 UA 猜测的 WebGPU 渐进增强路径。
11用单一帧时钟、Intersection/Resize Observer、页面可见性和统一 cleanup 管理动效,消除离屏 RAF、布局抖动与切页泄漏。
12